<template>
  <div class="component-editor">
    <!--组件配置-->
    <template v-for="(info, infoKey, infoIndex) in propsGroup">
      <el-card :key="infoKey" :style="infoIndex > 0 ? 'margin-top: 10px;' : ''">
        <div slot="header" @click="info.show = !info.show" :style="{color: info.show ? '#faad14' : 'inherit'}">
          <i :class="info.show ? 'el-icon-minus' : 'el-icon-plus'"></i>
          <span>{{ info.name }}</span>
        </div>
        <div v-show="info.show">
          <template v-for="(item, itemKey) in info.props" v-if="(!item.editor.work || item.editor.work()) && item.editor.ignore">
            <template v-if="item.editor.type == 'custom'">

            </template>
            <div class="form-item" v-else :key='itemKey'>
              <div class="label">
                <el-tooltip placement="top">
                  <div style="max-width:300px" slot="content">{{ item.editor.desc }}</div>
                  <span>{{ item.editor.label }}</span>
                </el-tooltip>
              </div>
              <div class="value">
                <!-- 文本相关 -->
                <el-input v-if="item.editor.type == 'string'" size="mini" v-model="componentInfo[itemKey]"></el-input>
                <el-input v-else-if="item.editor.type == 'number'" type="number" size="mini" v-model.number="componentInfo[itemKey]"></el-input>
                <el-input v-else-if="item.editor.type == 'input'" size="mini" v-model="componentInfo[itemKey]"></el-input>
                <el-input v-else-if="item.editor.type == 'text'" :autosize="{ minRows: 2, maxRows: 5}" type="textarea" size="mini" v-model="componentInfo[itemKey]"></el-input>
                <rich-text v-else-if="item.editor.type == 'richtext'" :id='itemKey' v-model="componentInfo[itemKey]"></rich-text>
                <y-color-picker v-else-if="item.editor.type == 'color'" v-model="componentInfo[itemKey]" show-alpha></y-color-picker>
                <!-- json -->
                <attr-data v-else-if="item.editor.type == 'object'" type="object" :content.sync="componentInfo[itemKey]"></attr-data>
                <attr-data v-else-if="item.editor.type == 'array'" type="array" :content.sync="componentInfo[itemKey]"></attr-data>
                <attr-data v-else-if="item.editor.type == 'data'" :content.sync="componentInfo[itemKey]"></attr-data>
                <!-- 布尔值 -->
                <el-switch v-else-if="item.editor.type == 'boolean'" size="mini" v-model="componentInfo[itemKey]"></el-switch>
                <!-- 枚举 -->
                <el-select v-else-if="item.editor.type == 'enum'" :multiple="item.editor && item.editor.multiple" size="mini" v-model="componentInfo[itemKey]" placeholder="请选择">
                  <template v-for="(enumData, enumKey) in enumFilterFunc(item.editor.defaultList)">
                    <el-option :key="enumKey" :label="enumData.label" :value="enumData.value"></el-option>
                  </template>
                </el-select>
                <!-- 图片 -->
                <template v-else-if="item.editor.type == 'image'">
                  <attr-resource type="image" :url.sync="componentInfo[itemKey]"></attr-resource>
                </template>
                <attr-resource v-else-if="item.editor.type == 'audio'" type="audio" :url.sync="componentInfo[itemKey]"></attr-resource>
                <attr-resource v-else-if="item.editor.type == 'video'" type="video" :url.sync="componentInfo[itemKey]"></attr-resource>
                <attr-resource v-else-if="item.editor.type == 'file'" type="file" :url.sync="componentInfo[itemKey]"></attr-resource>
                <!-- 方法调用 -->
                <attr-function v-else-if="item.editor.type == 'function'" :content.sync="componentInfo[itemKey]"></attr-function>
              </div>
            </div>
          </template>
        </div>
      </el-card>
    </template>
  </div>
</template>

<script lang="ts">
import Props from './script/props'
export default {
  name: 'GodsEditor',
  components: {},
  props: {
    // 编辑器会传递给编辑面板组件的属性值，编辑器可以修改这些值来达到控制组件数据的作用
    componentInfo: { // 固定字段，收集所有属性值
      type: [Object],
      default () {
        return {
        }
      }
    }
  },
  data () {
    return {
      usedatasource: false,
      // region props分组
      propsGroupKey: 'BASE',
      propsGroupList: {
        BASE: {
          name: '组件设置',
          show: true
        },
        MODULE: {
          name: '模块设置',
          show: false
        },
        DATA_HUB: {
          name: '数据总线',
          show: false
        },
        LANGUAGE: {
          name: '文案设置',
          show: false
        },
        CALLBACK: {
          name: '事件处理',
          show: false
        },
        API: {
          name: '接口管理',
          show: false
        },
        ADMIN_API: {
          name: '后端接口',
          show: false
        },
      },
      propsGroup: {},
      // endregion
    }
  },
  computed: {
  },
  watch: {
    'componentInfo': {
      handler (v) {
        console.log(v)
      },
      deep: true
    },
  },
  mounted () {
    let propsInfo = Props
    for (let key in propsInfo) {
      if (!propsInfo[key].editor.ignore) {
        continue
      }
      let groupKey = this.propsGroupKey
      let groupName = this.propsGroupList[groupKey].name
      let groupShow = this.propsGroupList[groupKey].show || false
      if (propsInfo[key].editor.group && propsInfo[key].editor.group.id) {
        groupKey = propsInfo[key].editor.group.id
        groupName = this.propsGroupList[groupKey] && this.propsGroupList[groupKey].name ? this.propsGroupList[groupKey].name : '未定义分组'
        groupShow = this.propsGroupList[groupKey] && this.propsGroupList[groupKey].show ? this.propsGroupList[groupKey].show : false
      }
      if (!this.propsGroup.hasOwnProperty(groupKey)) {
        this.$set(this.propsGroup, groupKey, {
          id: groupKey,
          name: groupName,
          show: groupShow,
          props: {}
        })
      }
      if (propsInfo[key].editor.work) {
        // 重新绑定this指向
        propsInfo[key].editor.work = propsInfo[key].editor.work.bind(this.componentInfo)
      }
      this.$set(this.propsGroup[groupKey].props, key, propsInfo[key])
    }
  },
  methods: {
    // 枚举值处理
    enumFilterFunc (list) {
      if (!list) return []
      if (list instanceof Array) {
        return list.map(li => {
          return {
            label: li,
            value: li
          }
        })
      }
      if (typeof list === 'object') {
        return Object.entries(list).map(([key, value]) => {
          return {
            label: value,
            value: key
          }
        })
      }
      return list
    },
  },
}
</script>

<style scoped lang="scss">
.component-editor {
  .el-card:deep(.el-card__header) {
    padding: 5px;
  }
  .el-card:deep(.el-card__body) {
    padding: 0;
  }
  .el-tabs.el-tabs--border-card {
    border-radius: 5px;
    overflow: hidden;
    & .el-tabs__header {
      .el-tabs__new-tab {
        margin: 5px;
      }
    }
    .w-help {
      height: 30px;
      line-height: 30px;
      padding-left: 5px;
      color: #c8c8c8;
    }
  }
  .el-select, .el-date-editor {
    width: 100%;
  }
}
</style>
